<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>connection</title>
    <link rel="stylesheet" href="css/eee.css">

</head>
<body>
    <input type="text" id="username">
    <button id="submit">发送</button>
    <div id = "req"></div>
    <button class="ul2">发送</button>
    <ul id="ul1"></ul>


    <div id="f2">
        <div id="f1">
            <div  class="box">右键点击我</div>
            <div  class="box">右键点击我</div>
            <div  class="box">右键点击我</div>
            <div  class="box">右键点击我</div>
            <div  class="box">右键点击我</div>
            <div  class="box">右键点击我</div>
            <div  class="box">右键点击我</div>
        </div>
    </div>


    <script src="js/jquery.min.js"></script>
    <script>
        const div = document.getElementById('f2');

        // 监听右键点击事件
        div.addEventListener('contextmenu', function(event) {
            event.preventDefault(); // 阻止默认菜单

            // 移除已存在的菜单（避免重复）
            const existingMenu = document.querySelector('.custom-menu');
            if (existingMenu) existingMenu.remove();

            // 创建自定义菜单
            const menu = document.createElement('div');
            menu.className = 'custom-menu';

            // 根据点击位置定位菜单
            menu.style.left = `${event.clientX}px`;
            menu.style.top = `${event.clientY}px`;
            menu.style.zIndex = 3;

            // 菜单选项
            const options = [
                { text: '选项1', action: () => alert('你点击了选项1') },
                { text: '选项2', action: () => alert('你点击了选项2') },
                { text: '复制ID', action: () => copyId(event.target) }
            ];

            // 动态添加菜单项
            options.forEach(opt => {
                const item = document.createElement('div');
                item.className = 'custom-menu-item';
                item.textContent = opt.text;
                item.onclick = opt.action;
                menu.appendChild(item);
            });

            // 将菜单添加到页面
            document.body.appendChild(menu);

            // 点击其他地方关闭菜单
            document.addEventListener('click', closeMenu);
        });

        // 关闭菜单的函数
        function closeMenu() {
            const menu = document.querySelector('.custom-menu');
            if (menu) menu.remove();
            document.removeEventListener('click', closeMenu);
        }

        // 示例方法：复制元素的ID
        function copyId(element) {
            const id = element.id;
            navigator.clipboard.writeText(id);
            alert(`已复制ID: ${id}`);
        }




        $(".ul2").click(function () {
            let ul = document.getElementById("ul1");
            const newLi = document.createElement("li");
            newLi.textContent = "新增项（动态添加）";
            ul.appendChild(newLi);
            ul.innerHTML("<li>新增项（开头）</li>");
            //不能添加字符串
            // ul.appendChild( "<li>新增项（开头）</li>");

        });

        //发送
        $("#submit").click(function () {
            let s = $("#username").val();
            sendMes(s);
        });


        let websocket = new WebSocket("ws://" + location.host + "/WebSocketMessage");

        websocket.onopen = function() {
            console.log("websocket 连接成功!");
        }

        websocket.onmessage = function (e) {
            console.log("websocket 收到消息! " + e.data);
            // 此时收到的 e.data 是个 json 字符串, 需要转成 js 对象

            const output = document.getElementById("req");
            output.innerHTML += '<p>' + e.data + '</p>';
            // $(".req").html('<p>' + e.data + '</p>');
        };

        websocket.onclose = function() {
            console.log("websocket 连接关闭!");
        }

        websocket.onerror = function() {
            console.log("websocket 连接异常!");
        }

        function sendMes(s) {
            let req = {
                type: 'message',
                userId: "hh",
                sessionId: "cool",
                content: s
            };
            req = JSON.stringify(req);
            console.log("[websocket] send: " + req);
            // d) 通过 websocket 发送消息
            websocket.send(req);
        }

    </script>
</body>

</html>